
$(function () {

echarts_4();
echarts_5();
echarts_6();
function echarts_1() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart2'));

       option = {
  //  backgroundColor: '#00265f',
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        left: '0%',
		top:'10px',
        right: '0%',
        bottom: '4%',
       containLabel: true
    },
    xAxis: [{
        type: 'category',
      		data: ['商超门店', '教育培训', '房地产', '生活服务', '汽车销售', '旅游酒店', '五金建材'],
        axisLine: {
            show: true,
         lineStyle: {
                color: "rgba(255,255,255,.1)",
                width: 1,
                type: "solid"
            },
        },
		
        axisTick: {
            show: false,
        },
		axisLabel:  {
                interval: 0,
               // rotate:50,
                show: true,
                splitNumber: 15,
                textStyle: {
 					color: "rgba(255,255,255,.6)",
                    fontSize: '12',
                },
            },
    }],
    yAxis: [{
        type: 'value',
        axisLabel: {
           //formatter: '{value} %'
			show:true,
			 textStyle: {
 					color: "rgba(255,255,255,.6)",
                    fontSize: '12',
                },
        },
        axisTick: {
            show: false,
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: "rgba(255,255,255,.1	)",
                width: 1,
                type: "solid"
            },
        },
        splitLine: {
            lineStyle: {
               color: "rgba(255,255,255,.1)",
            }
        }
    }],
    series: [
		{
        type: 'bar',
        data: [200, 300, 300, 900, 1500, 1200, 600],
        barWidth:'35%', //柱子宽度
       // barGap: 1, //柱子之间间距
        itemStyle: {
            normal: {
                color:'#2f89cf',
                opacity: 1,
				barBorderRadius: 5,
            }
        }
    }
		
	]
};
      
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
    }
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
function echarts_2() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart2'));

      option = {
       
        normal: {
          top: 200,
          left: 300,
          width: 500,
          height: 400,
          zIndex: 6,
          backgroundColor: "",
        },
        color: ["rgba(245, 166, 35, 1)", "rgba(19, 173, 255, 1)"],
        
        tooltip: {
          show: true,
          trigger: "item",
        },
        legend: {
          show: true,
          icon: "circle",
          left: "0	%",
          top: "85%",
          orient: "horizontal",
          textStyle: {
            fontSize: 10,
            color: "#fff",
          },
          data: ["贵州", "全国"],
        },
        radar: {
          center: ["50%", "43%"],
          radius: "55%",
          startAngle: 90,
          splitNumber: 4,
          shape: "circle",
          splitArea: {
            areaStyle: {
              color: ["transparent"],
            },
          },
          axisLabel: {
            show: false,
            fontSize: 18,
            color: "#fff",
            fontStyle: "normal",
            fontWeight: "normal",
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "white", //
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "white", //
            },
          },
          indicator: [
            {
              name: "经济发展",
              max: 80,
            },
            {
              name: "人口潜力",
              max: 80,
            },
            {
              name: "商业前景",
              max: 80,
            },
            {
              name: "消费能力",
              max: 80,
            },
            {
              name: "交通辐射力",
              max: 80,
            },
            {
              name: "其他",
              max: 80,
            },
          ],
        },
        series: [
          {
            name: "全国",
            type: "radar",
            symbol: "circle",
            symbolSize: 10,
            areaStyle: {
              normal: {
                color: "rgba(245, 166, 35, 0.4)",
              },
            },
            itemStyle: {
              color: "rgba(245, 166, 35, 1)",
              borderColor: "rgba(245, 166, 35, 0.3)",
              borderWidth: 10,
            },
            lineStyle: {
              normal: {
                type: "dashed",
      
                color: "rgba(245, 166, 35, 1)",
                width: 2,
              },
            },
            data: [[80,80,80,80,80,76,80,77]],
          },
          {
            name: "贵州",
            type: "radar",
            symbol: "circle",
            symbolSize: 10,
            itemStyle: {
              normal: {
                color: "rgba(19, 173, 255, 1)",
                borderColor: "rgba(19, 173, 255, 0.4)",
                borderWidth: 10,
              },
            },
            areaStyle: {
              normal: {
                color: "rgba(19, 173, 255, 0.5)",
              },
            },
            lineStyle: {
              normal: {
                color: "rgba(19, 173, 255, 1)",
                width: 2,
                type: "dashed",
              },
            },
            data: [[60, 60, 65, 60, 70, 40, 80, 63]],
          },
        ],
      };

      
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
    }
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
function echarts_5() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart5'));

       option = {
			title:{
			    // text:'按类型统计',
			    top:'bottom',
			    left:'center',
			    textStyle:{
			        fontSize: 14,
			        fontWeight: '',
			        color: '#ffffff'
			    },
			},//标题
			tooltip: {
			    trigger: 'item',
			    formatter: "{a} <br/>{b}: {c} ({d}%)",
			    /*formatter:function(val){   //让series 中的文字进行换行
			         console.log(val);//查看val属性，可根据里边属性自定义内容
			         var content = var['name'];
			         return content;//返回可以含有html中标签
			     },*/ //自定义鼠标悬浮交互信息提示，鼠标放在饼状图上时触发事件
			},//提示框，鼠标悬浮交互时的信息提示
			legend: {
				// top:'95%',
				orient: 'vertical',
				x: 'right',
				y: 'center',
				itemWidth: 10,
				itemHeight: 10,
				itemGap: 14,
				
				data: ['高耗材料', 'IVD', '医疗设备'],
				textStyle: {
			                color: 'rgba(255,255,255,.6)',
							fontSize:'12',
						}
			},
			
			graphic:{
			    type:'text',
			    left:'center',
			    top:'center',
				// top:'20%',
			    style:{
			        text:'产品批件总量\n'+'150', //使用“+”可以使每行文字居中
			        textAlign:'center',
			        font:'italic bolder 14px cursive',
			        fill:'#ffffff',
					
			        width:30,
			        height:20
			    }
			},//此例饼状图为圆环中心文字显示属性，这是一个原生图形元素组件，功能很多
			       
			
				   
			series: [
			    {
					
			        name:'产品批件总量',//tooltip提示框中显示内容
			        type: 'pie',//图形类型，如饼状图，柱状图等
			        radius: ['35%', '65%'],//饼图的半径，数组的第一项是内半径，第二项是外半径。支持百分比，本例设置成环形图。具体可以看文档或改变其值试一试
			        roseType:'area',//是否显示成南丁格尔图，默认false
			        itemStyle: {
						
			            normal:{
			                label:{
			                    show:true,
			                    textStyle:{color:'#ffffff',fontSize:"15"},
			                    formatter:function(val){   //让series 中的文字进行换行
			                        return val.name.split("-").join("\n");}
			                },//饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。可以与itemStyle属性同级，具体看文档
			                labelLine:{
			                    show:true,
			                    lineStyle:{color:'#ffffff'}
			                }//线条颜色
			            },//基本样式
			            emphasis: {
			                shadowBlur: 10,
			                shadowOffsetX: 0,
			                shadowColor: 'rgba(0, 0, 0, 0.5)',//鼠标放在区域边框颜色
			                textColor:'#000'
			            }//鼠标放在各个区域的样式
			        },
			        data: [
			            {value: 40, name: '高耗材料'},
			            {value: 30, name: 'IVD'},
			            {value: 50, name: '医疗设备'}
			        ],//数据，数据中其他属性，查阅文档
			        color: ['#51CEC6','#FFB703','#5FA0FA'],//各个区域颜色
			    },//数组中一个{}元素，一个图，以此可以做出环形图
				
				{
				    name:'产品批件分布',//tooltip提示框中显示内容
				    type: 'pie',//图形类型，如饼状图，柱状图等
				    radius: ['40%', '60%'],//饼图的半径，数组的第一项是内半径，第二项是外半径。支持百分比，本例设置成环形图。具体可以看文档或改变其值试一试
				    roseType:'area',//是否显示成南丁格尔图，默认false
				    itemStyle: {
						
				        normal:{
				            label:{
				                show:true,
								position: 'inner',
				                textStyle:{color:'#fff',fontSize:"10"},
				               formatter: '{d}%',
							   fontWeight:'bold',
				            },//饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。可以与itemStyle属性同级，具体看文档
				            labelLine:{
				                show:true,
				                lineStyle:{color:'#ffffff'}
				            }//线条颜色
				        }//基本样式
				       
				    },
					
				   data: [
				        {value: 40, name: '高耗材料'},
				        {value: 30, name: 'IVD'},
				        {value: 50, name: '医疗设备'},
				    ],//数据，数据中其他属性，查阅文档
				    color: ['#51CEC6','#FFB703','#5FA0FA'],//各个区域颜色
				},//数组中一个{}元素，一个图，以此可以做出环形图
				
				
			],//系列列表
       };

      
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
    }
	
	
	
	
	
	
	
function echarts_4() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart4'));

    var option = {
      
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      grid: {
        left: "2%",
        right: "4%",
        bottom: "14%",
        top: "16%",
        containLabel: true,
      },
      legend: {
        data: ["土地拆迁", "研发及基地建设", "投入生产"],
        right: 10,
        top: 12,
        textStyle: {
          color: "#fff",
        },
        itemWidth: 12,
        itemHeight: 10,
        // itemGap: 35
      },
      xAxis: {
        type: "category",
        data: [
              "项目一",
              "项目二",
              "项目三",
              "项目四",
              "项目五",
              "项目六",
              "项目七",
              "项目八",
              "项目九",
              "项目十",
              "项目十一",
              "项目十二",
              "项目十三",
              "项目十四",
              "项目十五",
              ],
        axisLine: {
          lineStyle: {
            color: "white",
          },
        },
        axisLabel: {
          // interval: 0,
          // rotate: 40,
          textStyle: {
            fontFamily: "Microsoft YaHei",
          },
        },
      },
    
      yAxis: {
        type: "value",
        max: "100",
        axisLine: {
          show: false,
          lineStyle: {
            color: "white",
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(255,255,255,0.3)",
          },
        },
        axisLabel: {},
      },
      dataZoom: [
        {
          show: true,
          height: 12,
          xAxisIndex: [0],
          bottom: "8%",
          start: 10,
          end: 90,
          handleIcon:
            "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
          handleSize: "110%",
          handleStyle: {
            color: "#d3dee5",
          },
          textStyle: {
            color: "#fff",
          },
          borderColor: "#90979c",
        },
        {
          type: "inside",
          show: true,
          height: 15,
          start: 1,
          end: 35,
        },
      ],
      series: [
        {
          name: "土地拆迁",
          type: "bar",
          barWidth: "15%",
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#fccb05",
                },
                {
                  offset: 1,
                  color: "#f5804d",
                },
              ]),
              barBorderRadius: 12,
            },
          },
          data: [86, 99, 69, 58, 38, 60, 90, 76, 88, 58, 38, 60, 90, 76, 88],
        },
        {
          name: "研发及基地建设",
          type: "bar",
          barWidth: "15%",
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#8bd46e",
                },
                {
                  offset: 1,
                  color: "#09bcb7",
                },
              ]),
              barBorderRadius: 11,
            },
          },
          data: [26, 20, 39, 68, 38, 60, 50, 76, 48, 58, 38, 60, 20, 36, 58],
        },
        {
          name: "投入生产",
          type: "bar",
          barWidth: "15%",
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#248ff7",
                },
                {
                  offset: 1,
                  color: "#6851f1",
                },
              ]),
              barBorderRadius: 11,
            },
          },
          data: [34, 67, 80, 24, 33, 44, 55, 66, 77, 88, 55, 44, 33, 22, 11],
        },
      ],
    };
    
    var app = {
      currentIndex: -1,
    };
    setInterval(function () {
      var dataLen = option.series[0].data.length;
    
      // 取消之前高亮的图形
      myChart.dispatchAction({
        type: "downplay",
        seriesIndex: 0,
        dataIndex: app.currentIndex,
      });
      app.currentIndex = (app.currentIndex + 1) % dataLen;
      //console.log(app.currentIndex);
      // 高亮当前图形
      myChart.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: app.currentIndex,
      });
      // 显示 tooltip
      myChart.dispatchAction({
        type: "showTip",
        seriesIndex: 0,
        dataIndex: app.currentIndex,
      });
    }, 1000);


      
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
    }
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
function echarts_6() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart6'));

        var dataStyle = {
	normal: {
		label: {
			show: false
		},
		labelLine: {
			show: false
		},
		//shadowBlur: 40,
		//shadowColor: 'rgba(40, 40, 40, 1)',
	}
};
var placeHolderStyle = {
	normal: {
		color: 'rgba(255,255,255,.05)',
		label: {show: false,},
		labelLine: {show: false}
	},
	emphasis: {
		color: 'rgba(0,0,0,0)'
	}
};
option = {
	title:{
	    // text:'按类型统计',
	    top:'bottom',
	    left:'center',
	    textStyle:{
	        fontSize: 14,
	        fontWeight: '',
	        color: '#ffffff'
	    },
	},//标题
	tooltip: {
	    trigger: 'item',
	    formatter: "{a} <br/>{b}: {c} ({d}%)",
	    /*formatter:function(val){   //让series 中的文字进行换行
	         console.log(val);//查看val属性，可根据里边属性自定义内容
	         var content = var['name'];
	         return content;//返回可以含有html中标签
	     },*/ //自定义鼠标悬浮交互信息提示，鼠标放在饼状图上时触发事件
	},//提示框，鼠标悬浮交互时的信息提示
	legend: {
		// top:'95%',
		itemWidth: 10,
	    itemHeight: 10,
		itemGap: 14,
		bottom: '1%',
		
		data: ['高耗材料', 'IVD', '医疗设备'],
		textStyle: {
	                color: 'rgba(255,255,255,.6)',
					fontSize:'12',
				}
	},
	
	graphic:{
	    type:'text',
	    left:'center',
	    top:'center',
		// top:'20%',
	    style:{
	        text:'专利数量\n'+'150', //使用“+”可以使每行文字居中
	        textAlign:'center',
	        font:'italic bolder 14px cursive',
	        fill:'#ffffff',
			
	        width:30,
	        height:20
	    }
	},//此例饼状图为圆环中心文字显示属性，这是一个原生图形元素组件，功能很多
	       
	
		   
	series: [
	    {
			
	        name:'专利数量',//tooltip提示框中显示内容
	        type: 'pie',//图形类型，如饼状图，柱状图等
	        radius: ['35%', '65%'],//饼图的半径，数组的第一项是内半径，第二项是外半径。支持百分比，本例设置成环形图。具体可以看文档或改变其值试一试
	        //roseType:'area',是否显示成南丁格尔图，默认false
	        itemStyle: {
				
	            normal:{
	                label:{
	                    show:true,
	                    textStyle:{color:'#ffffff',fontSize:"15"},
	                    formatter:function(val){   //让series 中的文字进行换行
	                        return val.name.split("-").join("\n");}
	                },//饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。可以与itemStyle属性同级，具体看文档
	                labelLine:{
	                    show:true,
	                    lineStyle:{color:'#ffffff'}
	                }//线条颜色
	            },//基本样式
	            emphasis: {
	                shadowBlur: 10,
	                shadowOffsetX: 0,
	                shadowColor: 'rgba(0, 0, 0, 0.5)',//鼠标放在区域边框颜色
	                textColor:'#000'
	            }//鼠标放在各个区域的样式
	        },
	        data: [
	            {value: 40, name: '高耗材料'},
	            {value: 30, name: 'IVD'},
	            {value: 50, name: '医疗设备'}
	        ],//数据，数据中其他属性，查阅文档
	        color: ['#51CEC6','#FFB703','#5FA0FA'],//各个区域颜色
	    },//数组中一个{}元素，一个图，以此可以做出环形图
		
		{
		    name:'专利分布',//tooltip提示框中显示内容
		    type: 'pie',//图形类型，如饼状图，柱状图等
		    radius: ['40%', '60%'],//饼图的半径，数组的第一项是内半径，第二项是外半径。支持百分比，本例设置成环形图。具体可以看文档或改变其值试一试
		    //roseType:'area',是否显示成南丁格尔图，默认false
		    itemStyle: {
				
		        normal:{
		            label:{
		                show:true,
						position: 'inner',
		                textStyle:{color:'#fff',fontSize:"10"},
		               formatter: '{d}%',
					   fontWeight:'bold',
		            },//饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。可以与itemStyle属性同级，具体看文档
		            labelLine:{
		                show:true,
		                lineStyle:{color:'#ffffff'}
		            }//线条颜色
		        }//基本样式
		       
		    },
			
		   data: [
		        {value: 40, name: '高耗材料'},
		        {value: 30, name: 'IVD'},
		        {value: 50, name: '医疗设备'},
		    ],//数据，数据中其他属性，查阅文档
		    color: ['#51CEC6','#FFB703','#5FA0FA'],//各个区域颜色
		},//数组中一个{}元素，一个图，以此可以做出环形图
		
		
	],//系列列表
};
      
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
    }

	
	
	
	
	
	
	
	
	
	
	
	
	
function echarts_31() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('fb1')); 
option = {
   
	    title: [{
        text: '年龄分布',
        left: 'center',
        textStyle: {
            color: '#fff',
			fontSize:'16'
        }

    }],
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)",
position:function(p){   //其中p为当前鼠标的位置
            return [p[0] + 10, p[1] - 10];
        }
    },
    legend: {
        
top:'70%',
       itemWidth: 10,
        itemHeight: 10,
        data:['0岁以下','20-29岁','30-39岁','40-49岁','50岁以上'],
                textStyle: {
            color: 'rgba(255,255,255,.5)',
			fontSize:'12',
        }
    },
    series: [
        {
        	name:'年龄分布',
            type:'pie',
			center: ['50%', '42%'],
            radius: ['40%', '60%'],
                  color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab','#06b4ab','#06c8ab','#06dcab','#06f0ab'],	
            label: {show:false},
			labelLine: {show:false},
            data:[
                {value:1, name:'0岁以下'},
                {value:4, name:'20-29岁'},
                {value:2, name:'30-39岁'},
                {value:2, name:'40-49岁'},
                {value:1, name:'50岁以上'},
            ]
        }
    ]
};
      
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
    }
function echarts_32() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('fb2'));
option = {
   
	    title: [{
        text: '职业分布',
        left: 'center',
        textStyle: {
            color: '#fff',
			fontSize:'16'
        }

    }],
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)",
position:function(p){   //其中p为当前鼠标的位置
            return [p[0] + 10, p[1] - 10];
        }
    },
    legend: {
        
    top:'70%',
       itemWidth: 10,
        itemHeight: 10,
        data:['学生','教育','商业','家庭主妇','退休人员','其他'],
                textStyle: {
           color: 'rgba(255,255,255,.5)',
			fontSize:'12',
        }
    },
    series: [
        {
        	name:'职住比',
            type:'pie',
			center: ['50%', '42%'],
            radius: ['40%', '60%'],
            color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab','#06b4ab','#06c8ab','#06dcab','#06f0ab'],	
            label: {show:false},
			labelLine: {show:false},
            data:[
                {value:5, name:'学生'},
                {value:1, name:'教育'},
                {value:6, name:'商业'},
                {value:2, name:'家庭主妇'},
                {value:1, name:'退休人员'},
                {value:1, name:'其他'},
            ]
        }
    ]
};
      
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
    }
function echarts_33() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('fb3'));
option = {
	    title: [{
        text: '兴趣分布',
        left: 'center',
        textStyle: {
            color: '#fff',
			fontSize:'16'
        }

    }],
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)",
position:function(p){   //其中p为当前鼠标的位置
            return [p[0] + 10, p[1] - 10];
        }
    },
    legend: {
    top:'70%',
       itemWidth: 10,
        itemHeight: 10,
        data:['居家','旅游','运动','教育','出行','其他'],
                textStyle: {
            color: 'rgba(255,255,255,.5)',
			fontSize:'12',
        }
    },
    series: [
        {
        	name:'兴趣分布',
            type:'pie',
			center: ['50%', '42%'],
            radius: ['40%', '60%'],
                   color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab','#06b4ab','#06c8ab','#06dcab','#06f0ab'],	
            label: {show:false},
			labelLine: {show:false},
            data:[
                {value:2, name:'居家'},
                {value:3, name:'旅游'},
                {value:1, name:'运动'},
                {value:4, name:'教育'},
                {value:8, name:'出行'},
                {value:1, name:'其他'},
            ]
        }
    ]
};
      
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
    }
				
	
})





